<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h2 {
        text-align: center;
      }
      table {
        border-collapse: collapse;
        margin: 0 auto;
      }
      /* table, */
      th,
      td {
        border: 1px solid #333;
        text-align: center;
        width: 100px;
        height: 30px;
      }
    </style>
  </head>
  <body>
    <h2>银行卡余额</h2>

    <script>
      // 用户输入信息
      let zong = + prompt('你的银行卡总金额')
      let shui = + prompt('你的水费')
      let dian = + prompt('你的电费')
      let wang = + prompt('你的网费')
      let money = zong - shui - dian - wang

      document.write(`
      <table>
      <tr>
        <th>银行卡总额</th>
        <th>水费</th>
        <th>电费</th>
        <th>网费</th>
        <th>银行卡余额</th>
      </tr>
      <tr>
        <td>${zong}元</td>
        <td>${shui}元</td>
        <td>${dian}元</td>
        <td>${wang}元</td>
        <td>${money}元</td>
      </tr>
    </table>
    `)
    </script>
  </body>
</html>
